<template>
  <div>
    <tabs v-model="active"
          :animated="true"
          title-active-color="#fd6e05"
          title-inactive-color="#5d544f">
      <tab title="可申请提现设备">
        <div class="container"
             v-loading="loading">
          <div class="no-content" v-show="show">
            <img src="../../assets/images/withdraw/no_content.png" alt="" width="200">
            <span>暂无数据</span>
          </div>
          <el-card class="box-card" shadow="hover" v-for="item in deviceList" :key="item.index">
            <div slot="header" class="clearfix">
              <span style="margin-right: 5px">
                <img src="../../assets/images/withdraw/device_icon.png" alt="" width="15">
              </span>
              <span>SN:{{ item.deviceSn }}</span>
            </div>
            <div class="card-data">
              <div class="deals">
                <span class="duplicate-removal">累计日去重</span>
                <span>大于2元交易笔数</span>
              </div>
              <div class="amount">
                <span style="font-size: 18px; font-weight: bold; margin-right: -3px;">{{ item.total }}</span>
                <span>笔</span>
              </div>
            </div>
          </el-card>

        </div>
      </tab>
      <tab title="已获得奖励设备">
        <div class="container">
          <el-card class="box-card" shadow="hover" v-for="item in withdrawabledList" :key="item.index">
            <div slot="header" class="clearfix">
              <span style="margin-right: 5px">
                <img src="../../assets/images/withdraw/device_icon.png" alt="" width="15">
              </span>
              <span>SN:{{ item.deviceSn }}</span>
            </div>
            <div class="card-data">
              <div class="deals">
                <span class="duplicate-removal">累计日去重</span>
                <span>大于2元交易笔数</span>
              </div>
              <div class="amount">
                <span style="font-size: 18px; font-weight: bold; margin-right: -3px;">{{ item.total }}</span>
                <span>笔</span>
              </div>
            </div>
          </el-card>
        </div>
      </tab>
    </tabs>
    <div class="footer" v-show="active === 0">
      <el-button
        class="themeButton"
        @click="$router.push('/withdraw')"
      >
        去提现
      </el-button>
    </div>
  </div>

</template>

<script>
import {getWithdrawDevice, getWithdrawabled} from '@/api/withdrawDevice'
import {Tab, Tabs} from 'vant';

export default {
  name: "withdraw-device",
  components: {
    Tab,
    Tabs
  },
  data() {
    return {
      active: "",
      deviceList: "",
      withdrawabledList: "",
      loading: true,
      show: false
    }
  },
  created() {
    const that = this
    getWithdrawDevice(this.$store.state.token).then(res => {
      that.deviceList = res.data.data
      that.loading = false
    }).catch((err) => {
      that.show = true
      that.loading = false
      this.$notify.error({
        title: '错误',
        message: err,
        showClose: false,
        duration: 2000
      });
    })
    getWithdrawabled(this.$store.state.token).then(res => {
      that.withdrawabledList = res.data.data
      that.loading = false
    }).catch((err) => {
      that.show = true
      that.loading = false
      this.$notify.error({
        title: '错误',
        message: err,
        showClose: false,
        duration: 2000
      });
    })
  }
}
</script>

<style lang="sass" scoped>
.container
  padding-bottom: 50px
  min-height: calc(100vh - 197px)

/deep/ .van-tabs
  .van-tabs__nav
    padding-left: 22px
    padding-right: 22px

    .van-tabs__line
      width: 20px
      height: 3px
      background-color: transparent
      border-radius: 2px
      background-image: linear-gradient(to right, rgba(253, 110, 5, .4), rgba(253, 110, 5, 1))

    .van-tab__text--ellipsis
      font-size: 14px

.box-card
  width: 100%

  .clearfix
    color: #1e2431
    font-weight: bold
    font-size: 13px
    display: flex
    justify-content: flex-start

.el-card
  box-sizing: border-box
  padding: 0 16px
  border: 0
  margin-bottom: 14px

  & /deep/ .el-card__header
    padding: 15px 0 2px
    border-bottom: 0

  & /deep/ .el-card__body
    padding: 0

  .card-data
    display: flex
    justify-content: space-between

    .deals
      height: 50px
      font-size: 14px
      color: rgba(51, 51, 51, .8)
      display: flex
      align-items: center

      .duplicate-removal
        color: #FD6E05
        background-color: rgba(253, 110, 5, .15)
        font-size: 12px
        padding: 4px 6px
        margin-right: 7px

    .amount
      font-size: 13px
      color: #1e2431
      line-height: 50px

.no-content
  height: 50vh
  width: 100%
  box-sizing: border-box
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  font-size: 14px
  color: rgba(51, 51, 51, .4)

.footer
  height: 50px
  position: fixed
  bottom: 0
  left: 0
  width: 100%
  box-sizing: border-box
  padding: 0 15px
  box-shadow: 0px -3px 2px 0px rgba(0, 0, 0, 0.02)
  background: #fff
  display: flex
  align-items: center

.themeButton
  width: 100%
  height: 36px
  color: #fff
  opacity: 1
  background: linear-gradient(90deg, rgba(253, 110, 5, 0.66) 10%, #fd6e05 81%)
  border-radius: 21px
  border: none
  transition: all .5s ease

  &:hover,
  &:active
    filter: brightness(1.1)
    box-shadow: 0 7px 25px 0 rgba(253, 110, 5, 0.41)


</style>
